<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
      <el-form-item label="申请人ID" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="充值类型" prop="userId">
        <el-input v-model="queryParams.walletType" placeholder="请输入充值类型" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="提现状态">
        <el-select v-model="form.region" placeholder="请选择提现状态">
          <el-option label="已拒绝" value="-1"></el-option>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已转账" value="1"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="申请日期">
        <el-date-picker v-model="dateRange1" size="small" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="审核日期">
        <el-date-picker v-model="dateRange2" size="small" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
        </el-button>

        <!-- <el-button type="primary" icon="el-icon-download" size="mini" @click="exportshowfun">导出提现银行卡</el-button> -->
      </el-form-item>
    </el-form>

    <div class="table_title">
      <span>列表数据</span>
      <el-button icon="el-icon-edit" size="mini" @click="handleCharge">手续费设置
      </el-button>
      <p>
        <span>提现手续费 {{ pnc }}% 提现积分点{{ usdt }}%</span>
      </p>
    </div>
    <!-- <div class="table_export">
      <el-form
        :model="exportParams"
        ref="exportForm"
        :inline="true"
        v-show="showSearch"
        label-width="110px"
      >
        <el-form-item label="用户ID" prop="userId">
          <el-input
            v-model="queryParams.userId"
            placeholder="请输入用户ID"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="提现转态" prop="type">
          <el-select
            v-model="queryParams.type"
            placeholder="请选择提现方式"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="item in auditStatustype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="cyan"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >导出
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <el-table v-loading="loading" :data="withdrawList" @selection-change="handleSelectionChange">
      <el-table-column label="申请人" align="center" prop="userId" />
      <el-table-column label="申请时间" align="center" prop="createTime" />
      <el-table-column label="提现金额" align="center" prop="withdrawAmt" />
      <el-table-column label="手续费" align="center" prop="serviceFee" />
      <el-table-column label="实际到账" align="center" prop="actualAmt" />
      <!-- <el-table-column label="提现方式" align="center" prop="money" /> -->
      <el-table-column label="提现类型" align="center" prop="amtType">
        <template slot-scope="scope">
          <!-- 1、USDT 2、PUSD 3、PNC 4、GPU -->
          <span>{{scope.row.amtType==1?'USDT':scope.row.amtType==2?'PUSD':scope.row.amtType==3?'PNC':scope.row.amtType==4?'GPU':""}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款人信息" align="center" prop="money">
        <template slot-scope="scope">
          <span>地址：{{
            scope.row.account
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="userAmt">
        <template slot-scope="scope">
          <span>{{
            scope.row.status == 1
              ? "已到账"
              : scope.row.status == 0
              ? "审核中"
              : "已拒绝"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="审核时间" align="center" prop="auditTime" />
      <!-- <el-table-column label="备注" align="center" prop="jkfAmt">
        <template slot-scope="scope">
          <span>{{
            scope.row.auditStatus == 1
              ? "提现申请中"
              : scope.row.auditStatus == 2
              ? "提现成功"
              : "提现失败"
          }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="180">
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.row.bankId" size="mini" type="text" icon="el-icon-view"
            @click="seebankfun(scope.row, 1)">银行卡提现详情
          </el-button>  v-if="scope.row.status == 0"-->
          <el-button v-if="scope.row.status == 0" size="mini" type="text" icon="el-icon-check"
            @click="audittgfun(scope.row, 1)">审核通过
          </el-button>
          <el-button v-if="scope.row.status == 0" size="mini" type="text" icon="el-icon-close"
            @click="audit(scope.row, 2)">审核拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="querypage.current" :limit.sync="querypage.size"
      @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="123px">

        <el-form-item label=" 提现USDT手续费" prop="usdt">
          <el-input-number v-model.number="form.usdt" :min="1" :max="100" /><span>%</span>
        </el-form-item>
        <el-form-item label=" 提现USDT手续费" prop="pnc">
          <el-input-number v-model.number="form.pnc" :min="1" :max="100" /><span>%</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 通过提现 -->
    <el-dialog title="审核通过" :visible.sync="tgVisible" width="25%">
      <!-- :before-close="handleClose" -->
      <div class="txdialog-span">
        <span>确认通过该用户的提现申请？</span>
        <br />
        <div class="txdialog">
          <span>提现用户(id)：<span class="red">{{ selectrow.userId }}</span></span>
          <span>打款金额：<span class="red">{{ selectrow.actualAmt }}</span></span>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="tgVisible = false">取 消</el-button>
        <el-button type="primary" @click="examinefun(1)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 驳回提现 -->
    <el-dialog title="审核驳回" :visible.sync="bhVisible" width="25%">
      <div class="txdialog-span">
        <span>确认驳回该用户的提现申请？</span>
        <br />
        <div class="txdialog">
          <span>提现用户(id)：<span class="red">{{ selectrow.userId }}</span></span>
          <span>打款金额：<span class="red">{{ selectrow.actualAmt }}</span></span>
        </div>
      </div>
      <!-- :before-close="handleClose" -->
      <!-- <div class="txdialog">
        <span>备注</span>
        <el-input type="textarea" placeholder="请输入内容" v-model="selectrow.remark" autosize maxlength="50"
          show-word-limit>
        </el-input>
      </div> -->
      <div class="txdialog-beiz">
        <span>备注</span>
        <el-input type="textarea" placeholder="请输入内容" v-model="selectrow.remark" autosize maxlength="50"
          show-word-limit>
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="bhVisible = false">取 消</el-button>
        <el-button type="primary" @click="examinefun(-1)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 驳回提现 -->
    <el-dialog title="银行卡提现详情" :visible.sync="xqVisible" width="40%">
      <div class="txdialog-span">
        <span>详细信息</span>
        <br />
        <div class="txdialog txdialogback">
          <span>用户(Id)：<span>{{ bankobj.userId }}</span></span>
          <span>创建时间：<span>{{ bankobj.createTime }}</span></span>
        </div>
        <div class="txdialog txdialogback">
          <span>提现持卡人：<span>{{ bankobj.payeeName }}</span></span>
          <span>开户行：<span>{{ bankobj.bankName }}</span></span>
        </div>
        <div class="txdialog txdialogback">
          <span>开户支行：<span>{{ bankobj.bankBranchName }}</span></span>
          <span>银行卡号：<span>{{ bankobj.bankCardNo }}</span></span>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="xqVisible = false">取 消</el-button>
        <el-button type="primary" @click="examinefun(3)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 银行提现导出 -->
    <el-dialog title="请选择导出条件" :visible.sync="exportVisible" width="40%">
      <div class="txdialog-span">
        <!-- <span>详细信息</span>
        <br />
        <div class="txdialog txdialogback">
          <span
            >用户(Id)：<span>{{ bankobj.userId }}</span></span
          >
          <span
            >创建时间：<span>{{ bankobj.createTime }}</span></span
          >
        </div>
        <div class="txdialog txdialogback">
          <span
            >提现持卡人：<span>{{ bankobj.payeeName }}</span></span
          >
          <span
            >开户行：<span>{{ bankobj.bankName }}</span></span
          >
        </div>
        <div class="txdialog txdialogback">
          <span
            >开户支行：<span>{{ bankobj.bankBranchName }}</span></span
          >
          <span
            >银行卡号：<span>{{ bankobj.bankCardNo }}</span></span
          >
        </div> -->
        <el-form :model="exportParams" ref="exportForm" :inline="true" v-show="showSearch" label-width="110px">
          <el-form-item label="创建时间">
            <el-date-picker v-model="dateexportParams" size="small" style="width: 240px" value-format="yyyy-MM-dd"
              type="daterange" range-separator="-" start-placeholder="创建开始日期" end-placeholder="创建结束日期"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="用户ID" prop="userId">
            <el-input
              v-model="exportParams.userId"
              placeholder="请输入用户ID"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="提现转态" prop="auditStatus">
            <el-select
              v-model="exportParams.auditStatus"
              placeholder="请选择提现方式"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="item in auditexporttype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="exportVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleExport">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selCashWithdrawal,
  getWithdrawList,
  auditWithdraw,
  getpncInfo,
  getCommissionProportion,
  auditCommission,
  updateServiceCharge,
  selBankById,
  exprotBanks,
  dateexportParams,
} from "@/api/admin/finance";

export default {
  name: "UserWithdraw",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 任务详情表格数据
      withdrawList: [],
      // 弹出层标题
      title: "",
      //查询日期
      // 是否显示弹出层
      open: false,
      tgVisible: false,
      bhVisible: false,
      xqVisible: false,
      exportVisible: false,
      bhtext: "",
      textaretext: "",
      selectrow: {},
      // 查询参数

      querypage: {
        current: 1,
        size: 10,
      },
      queryParams: {

        walletType: "",
        userId: "",
        beginTime: "",
        endTime: "",
        beginAuditTime: "",
        endAuditTime: "",
        type: "",
      },
      dateRange1: [],
      dateRange2: [],
      dateexportParams: [],
      auditStatusOptions: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "已到账",
        },
        {
          value: 3,
          label: "已驳回",
        },
        {
          value: 4,
          label: "打款失败",
        },
        {
          value: 5,
          label: "已撤销",
        },
      ],
      auditStatustype: [
        {
          value: 1,
          label: "微信",
        },
        {
          value: 2,
          label: "银行卡",
        },
      ],
      auditexporttype: [
        {
          value: 1,
          label: "提现申请中",
        },
        {
          value: 2,
          label: "提现成功",
        },
        {
          value: 3,
          label: "提现失败",
        },
      ],
      exportParams: {
        createBeginTime: "",
        createEndTime: "",
      },
      form: {},
      pnc: "",
      usdt: "",
      bankobj: {},
    };
  },
  created() {
    this.getList();
    this.CommissionProportionfun();
  },
  methods: {
    CommissionProportionfun() {
      getCommissionProportion().then((res) => {
        this.pnc = res.data.pnc;
        this.usdt = res.data.usdt;
      });
    },
    getList() {
      this.loading = true;

      // selCashWithdrawal(
      //   {
      //     applyForBeginTime: this.queryParams.applyForBeginTime,
      //     applyForEndTime: this.queryParams.applyForEndTime,
      //     userId: this.queryParams.userId,
      //     auditBeginime: this.queryParams.auditBeginime,
      //     auditEndTime: this.queryParams.auditEndTime,
      //     auditStatus: this.queryParams.auditStatus,
      //     type: this.queryParams.type,
      //   },
      //   { current: this.querypage.current, size: this.querypage.size }
      // ).then((response) => {
      //   this.withdrawList = response.data.records;
      //   this.total = response.data.total;
      //   this.loading = false;
      //   //console.log(this.withdrawList);
      // });
      this.loading = true;
      selCashWithdrawal(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.withdrawList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.querypage.current = 1;
      this.queryParams.beginTime =
        this.dateRange1 && this.dateRange1[0]
          ? this.dateRange1[0] + " 00:00:00"
          : "";
      this.queryParams.endTime =
        this.dateRange1 && this.dateRange1[1]
          ? this.dateRange1[1] + " 23:59:59"
          : "";
      this.queryParams.beginAuditTime =
        this.dateRange2 && this.dateRange2[0]
          ? this.dateRange2[0] + " 00:00:00"
          : "";
      this.queryParams.endAuditTime =
        this.dateRange2 && this.dateRange2[1]
          ? this.dateRange2[1] + " 23:59:59"
          : "";
      this.getList();
      // this.getTotal();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.resetForm("queryParams");
      this.queryParams.beginTime = "";
      this.queryParams.endTime = "";
      this.queryParams.beginAuditTime = "";
      this.queryParams.endAuditTime = "";
      this.dateRange1 = [];
      this.dateRange2 = [];
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    audittgfun(row, auditStatus) {
      let _self = this;
      this.selectrow = row;
      this.tgVisible = true;
    },
    seebankfun(row, index) {
      //console.log("row", row);
      selBankById({ bankId: row.bankId }).then((res) => {
        //console.log(res);
        if (res.code == 200) {
          this.bankobj = res.data;
        } else {
          this.msgError("查询失败，请重试");
        }
      });
      this.xqVisible = true;
    },
    audit(row, auditStatus) {
      this.bhVisible = true;
      this.selectrow = row;

      // let _self = this;
      // _self.open = true;
      // _self.auditForm = {};
      // _self.auditForm = { goodsId: row.goodsId, auditStatus: auditStatus };
      // let text = "";
      // if (auditStatus === -1) {
      //   text = "拒绝";
      // } else {
      //   text = "通过";
      // }
      // this.$confirm("确定审核" + text + "该提现记录吗?", "警告", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(function () {
      //     return auditWithdraw(_self.auditForm);
      //   })
      //   .then(() => {
      //     this.msgSuccess("审核成功");
      //     this.getList();
      //     this.reload();
      //   })
      //   .catch(function () {});
    },
    examinefun(index) {
      // console.log(index)
      this.$confirm(
        "确定审核" + (index == 1 ? "通过" : "驳回") + "该提现记录吗?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          console.log(this.selectrow)
          // return
          auditCommission({
            // userId: this.selectrow.userId,
            withdrawId: this.selectrow.withdrawId,
            status: index,
            remark: this.selectrow.remark ? this.selectrow.remark : ''

          }).then((res) => {
            if (res.code === 200) {
              this.msgSuccess("操作成功");
              this.getList();
              // this.withdrawList.forEach((el, rowIndex) => {
              //   if (el.id === this.selectrow.id) {
              //     this.withdrawList[rowIndex].auditStatus = index;
              //   }
              // });
            }
            // this.
            this.bhVisible = false;
            this.tgVisible = false;
          });
        })
        .catch(function () { });
    },
    handleCharge() {
      this.title = "手续费设置";
      this.reset();
      this.form = {
        pnc: this.pnc,
        usdt: this.usdt,
      };
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    //导出显示
    handleExport() {
      let t = this;
      this.exportParams.createBeginTime =
        this.dateexportParams[0] + " 00:00:00";
      this.exportParams.createEndTime = this.dateexportParams[1] + " 23:59:59";
      // this.queryorder.createBeginTime = this.dateRange[0] + " 00:00:00";
      // this.queryorder.createEndTime = this.dateRange[1] + " 23:59:59";

      const queryParams = this.exportParams;
      //console.log(queryParams);
      this.$confirm("是否确认导出提现信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          exprotBanks(queryParams).then((res) => {
            t.downloadfun(new Date().getTime() + "提现银行卡数据.xls", res);
            t.exportVisible = false;
          });
        })

        .catch(function () { });
      // exprotBanks
    },
    exportshowfun() {
      this.dateexportParams = [];
      this.exportVisible = true;
    },

    downloadfun(name, file) {
      let fileName = name; //自定义文件名
      const blob = new Blob([file], {
        // type: "application/vnd.ms-excel;charset=utf-8", //文件格式
      });
      const a = document.createElement("a"); //创建下载链接
      a.href = URL.createObjectURL(blob);
      a.download = `${fileName}`;
      a.click();
      URL.revokeObjectURL(a.href);
      a.remove();
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("sddasd")
          updateServiceCharge({
            pnc: this.form.pnc,
            usdt: this.form.usdt,
          }).then((response) => {
            if (response.code === 200) {
              this.pnc = this.form.pnc;
              this.usdt = this.form.usdt;
              this.msgSuccess("修改成功");
              this.open = false;
              // this.getList();
            }
          });

        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.visible {
  .top {
    background: #d7d7d7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-weight: 900;
    font-size: 18px;
    color: #000000;
  }

  > p {
    display: flex;
    padding: 20px;

    > span {
      margin-right: 20px;

      > span {
        color: #7f7f7f;
      }
    }
  }
}

.status_color {
  color: #7db603;
}

.status_colorRed {
  color: #d9001b;
}

.el-tag {
  padding: 58px;
  font-size: 20px;
}
.txdialog {
  text-align: center;
  margin-top: 40px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 20px;
  span {
    flex: 1;
    text-align: center;
    // margin-right: 40px;
    white-space: nowrap;
  }
}
.txdialogback {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  span {
    margin-top: 10px;
    flex: 1;
    text-align: left;
    margin-right: 40px;
  }
}
.txdialog-beiz {
  display: flex;
  // width: 70%;
  margin-top: 20px;
  justify-content: center;
  span {
    white-space: normal;
    white-space: nowrap;
    margin-right: 10px;
  }
}
.txdialog-span {
  width: 100%;
  text-align: center;
}
.red {
  color: red;
}
.table_title {
  display: flex;
  text-align: left;
  align-items: center;
  span {
    font-size: 22px;
    font-weight: bold;
    margin-right: 20px;
  }
  p {
    font-size: 12px;
    margin-left: 10px;
    span {
      margin-right: 20px;
      font-size: 14px;
      font-weight: normal;
    }
  }
}
.table_export {
  display: flex;
  width: 100%;
  justify-content: right;
}
</style>
